<template>
  <div>
        <el-popover placement="bottom-start" width="1000" style="margin-right:10px;" trigger="click">
          <el-form :inline="true" :model="search">
              <el-form-item label="工序编号" >
                  <el-input v-model="search.name" clearable></el-input>
              </el-form-item>

              <el-form-item label="是否是毛坯外协" >
                  <el-select v-model="search.isMp" clearable>
                      <el-option label="否" value="0"></el-option>
                      <el-option label="是" value="1"></el-option>
                  </el-select>
              </el-form-item>

              <!-- <el-form-item label="处理状态" >
                  <el-select v-model="search.state" clearable>
                      <el-option label="待办" value="0"></el-option>
                      <el-option label="已办" value="1"></el-option>
                  </el-select>
              </el-form-item>                                -->
              <el-form-item label="重新生产的类型" >
                  <el-select v-model="search.targetType" clearable>
                      <el-option label="内部生产" value="1"></el-option>
                      <el-option label="毛坯外协" value="2"></el-option>
                      <el-option label="工序外协" value="3"></el-option>
                  </el-select>
              </el-form-item>                               
              <el-form-item label="不合格类型" >
                  <el-select v-model="search.type" clearable>
                      <el-option label="返工" value="1"></el-option>
                      <el-option label="报废" value="2"></el-option>
                  </el-select>
              </el-form-item>            
              <el-button type="primary" @click="searchBtn">确认</el-button>
              <el-button type="primary" @click="restSearchBtn">重置</el-button>
          </el-form>
          <el-button slot="reference" type="primary" icon="el-icon-search">查询</el-button>
        </el-popover>
    <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane name='0' label="待处理">
            <el-table :data="tableList" stripe border class="user-table"    style="width: 100%;">
                <el-table-column prop="planTaskProcess.nameName" label="工序编号" sortable min-width="100"></el-table-column>
                <el-table-column prop="planTaskTotal.code29" label="29所编号" sortable min-width="80"></el-table-column>
                <el-table-column prop="planTaskTotal.drawCode" label="图纸编号" sortable min-width="80"></el-table-column>
                <el-table-column prop="planTaskTotal.drawName" label="图纸名称" sortable min-width="80"></el-table-column>
                    <el-table-column prop="num" label="不合格数量" sortable min-width="80"></el-table-column>


                <el-table-column prop="isMp" label="是否是毛坯外协" sortable min-width="100">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isMp ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="不合格类型" sortable min-width="100">
                    <template slot-scope="scope">
                        <span v-html="scope.row.type ===1?'返工':scope.row.type ===2?'报废':'返工+报废'"></span>
                    </template>
                </el-table-column>
                <el-table-column prop="state" label="状态" sortable min-width="100">
                    <template slot-scope="scope">
                        <span v-html="scope.row.state ===0?'待办':'已办'"></span>
                    </template>
                </el-table-column>
                <el-table-column prop="targetType" label="重新生产的类型" sortable min-width="100">
                    <template slot-scope="scope">
                        <span v-html="scope.row.targetType ===1?'内部生产':scope.row.targetType ===2?'毛坯外协':scope.row.targetType ===3?'工序外协':''"></span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                    <el-button type="text" @click="showDialog(scope.row)">处理</el-button>
                    </template>
                </el-table-column>
            </el-table>   
            <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
   
        </el-tab-pane>
        <el-tab-pane name='1' label="已处理">
                <el-table :data="tableList" stripe border class="user-table"    style="width: 100%;">
                    <el-table-column prop="planTaskProcess.nameName" label="工序编号" sortable min-width="100"></el-table-column>
                    <el-table-column prop="planTaskTotal.code29" label="29所编号" sortable min-width="80"></el-table-column>
                    <el-table-column prop="planTaskTotal.drawCode" label="图纸编号" sortable min-width="80"></el-table-column>
                    <el-table-column prop="planTaskTotal.drawName" label="图纸名称" sortable min-width="80"></el-table-column>
                    <el-table-column prop="num" label="不合格数量" sortable min-width="80"></el-table-column>


                    <el-table-column prop="isMp" label="是否是毛坯外协" sortable min-width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.isMp ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="不合格类型" sortable min-width="100">
                        <template slot-scope="scope">
                            <span v-html="scope.row.type ===1?'返工':scope.row.type ===2?'报废':'返工+报废'"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="state" label="状态" sortable min-width="100">
                        <template slot-scope="scope">
                            <span v-html="scope.row.state ===0?'待办':'已办'"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="targetType" label="重新生产的类型" sortable min-width="100">
                        <template slot-scope="scope">
                            <span v-html="scope.row.targetType ===1?'内部生产':scope.row.targetType ===2?'毛坯外协':'工序外协'"></span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                        <el-button type="text" @click="showDialog(scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>   
                <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
                
        </el-tab-pane>
    </el-tabs>

    <el-dialog class="bodyNopaddingTop" :title="dialog.title" :visible.sync="dialog.isShow"  v-dialogDrag  width="600px">
          <el-form :inline="true" :model="currentRow" label-width="190px"  class="demo-ruleForm">
              <el-form-item label="重新生产的类型" >
                  <el-select v-model="currentRow.targetType" clearable>
                      <el-option label="内部生产" :value="1"></el-option>
                      <el-option label="毛坯外协" :value="2"></el-option>
                      <el-option label="工序外协" :value="3"></el-option>
                  </el-select>
              </el-form-item>
              <br>
              <el-form-item label="结果描述" >
                  <el-input v-model="currentRow.remark"  type="textarea" :autosize="{ minRows: 5, maxRows: 10}"></el-input>
              </el-form-item>
              <br>
                            <el-form-item label="" >
                            </el-form-item>
           
          </el-form>
                            <el-button v-if="activeName==='0'" type="primary" @click="editUnqualified" style="float:right;margin-right:30px;margin-bottom:15px;">确定</el-button>

    </el-dialog>
  </div>
</template>
<script>
import planApi from 'plugins/axios/planApi.js';
export default {
    data(){
        return{
            search:{
                name:'',
                isMp:'',
                state:'',
                targetType:'',
                type:'',
            },
            currentRow:{},
            tableList:[],
            currentPage:1,
            pageSize:10,
            total:0,
            dialog:{/**弹框配置 */
                title:'',
                isShow:false,
                type:'',
                formData:{},
                activeName:'2',
                otherUpDataData:{},
                tableData:[],
                drawCode:''
            },
            activeName:'0',
        }
    },
    created(){
        this.$nextTick(()=>{
            this.queryTableList();
        });
    },
    methods:{
        tabClick(){
        let self = this;
        self.queryTableList();
        },
        handleSizeChange(){
            let self = this;
        },
        handleCurrentChange(){
            let self = this;
        },
        searchBtn(){
            let self = this;
            self.queryTableList();
        },
        restSearchBtn(){
            let self = this;
            self.search={
                name:'',
                isMp:'',
                state:'',
                targetType:'',
                type:'',
            }
            self.queryTableList();
        },
        queryTableList(){
            let self = this;
            let param = {
               currentPage:self.currentPage, 
               pageSize:self.pageSize, 
               name:self.search.name, 
               isMp:self.search.isMp, 
               state:self.activeName, 
               targetType:self.search.targetType, 
               type:self.search.type, 
            };
            planApi.selectUnqualByCondition(param).then(res=>{
                self.tableList = res.content.records;
                self.total = self.content.total;
            });
        },
        showDialog(row){
            let self = this;
            self.currentRow = row;
            self.dialog.isShow = true;
        },
        editUnqualified(){
            let self = this;
            let param = {
                id:self.currentRow.id,
                remark:self.currentRow.remark,
                targetType:self.currentRow.targetType,
            }
            planApi.editUnqualified(param).then(res=>{
                self.$message({message:'处理成功',type:'success'});
                self.queryTableList();
            });
        },

    }
}
</script>